import React, { memo } from 'react';
import { useModel } from '@@/plugin-model/useModel';

export const Test: React.FC = ({ children }) => {
  console.log('val-test');
  const { val, setVal } = useModel('useTest', (model) => ({
    val: model.val,
    setVal: model.setVal,
  }));
  return (
    <div>
      {children}
      <button
        onClick={() => {
          setVal(val + 1);
        }}
      >
        set1
      </button>
      <div>test1：{val}</div>
    </div>
  );
};

export const Test2: React.FC = ({ children }) => {
  console.log('val-test222');
  const { val2, setVal2 } = useModel('useTest', (model) => ({
    val2: model.val2,
    setVal2: model.setVal2,
  }));
  return (
    <div>
      {children}
      <button
        onClick={() => {
          setVal2(val2 + 1);
        }}
      >
        set2
      </button>
      <div>test2：{val2}</div>
    </div>
  );
};

export default {
  Test: memo(Test),
  Test2: memo(Test2),
};
